<template>
    <div>
        搜索：<input v-model="keyword" type="text" />
        <div style="margin-top: 20px">
            <table border width="600" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in searchData" :key="item.id">
                        <td align="center">{{ item.name }}</td>
                        <td align="center">{{ item.price }}</td>
                        <td align="center">
                            <button @click="item.num > 0 ? item.num-- : null">-</button>
                            {{ item.num }}
                            <button @click="item.num < 99 ? item.num++ : null">+</button>
                        </td>
                        <td align="center">{{ item.price * item.num }}</td>
                        <td align="center"><button @click="del(index)">删除</button></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5" align="right">总价金额：{{ total }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <button @click="goHome">跳转</button>
</template>
<script setup>
import { ref, computed, reactive } from "vue";
import { useRouter } from "vue-router";
const data = reactive([
    {
        name: "雅阁",
        price: 20,
        num: 1
    },
    {
        name: "亚洲龙",
        price: 10,
        num: 1
    },
    {
        name: "帕沙特",
        price: 15,
        num: 1
    }
]);
let keyword = ref("");
/* 删除操作 */
const del = index => {
    data.splice(index, 1);
};
/* 总价计算 */
const total = computed({
    get() {
        return data.reduce((prev, next) => {
            return prev + next.num * next.price;
        }, 0);
    }
});
/* 搜搜查询列表 */
const searchData = computed(() => {
    return data.filter(item => {
        return item.name.includes(keyword.value);
    });
});
/* 跳转home页面 */
const router = useRouter();
const goHome = () => {
    router.push({ path: "/home" });
};
</script>
<style scoped>
.read-the-docs {
    color: #888;
}
</style>
